<template>
  <div>
    <div class="user-list">
      <div v-for="item in data" :key="item.id" class="item" @click="openLink(item.html_url)">
        <div>
          <a-avatar :preview="false" :src="item.avatar_url" class="avatar"></a-avatar>
        </div>
        <div class="user-name">
          {{ item.name }}
        </div>
      </div>
    </div>

    <a-empty v-if="data.length === 0" description="没有数据或者请求受限"></a-empty>
  </div>
</template>

<script setup lang="ts">
import { openLink } from '@/utils/common/utils';

defineProps<{
  data: any[];
}>();
</script>

<style lang="scss" scoped>
.user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  text-align: center;
  overflow-x: hidden;
}
</style>
